<!-- 修改密码 -->
<template>
  <div
    id="altpass"
    :style="{
      backgroundColor: bgcColor.color === '#000' ? '#fff' : 'rgb(33, 33, 48)',
      color: bgcColor.color === '#000' ? 'rgb(33, 33, 48)' : '#fff'
    }"
  >
    <div class="title">Password Update</div>
    <el-row>
      <el-col :md="12">
        <div class="list">
          <div
            class="tit"
            :style="{
              color: bgcColor.color === '#000' ? '#000' : '#fff'
            }"
          >
            Original Password
          </div>
          <input
            type="password"
            v-model.trim="form.oldPass"
            @input="oldPassChange(1)"
            :style="{
              backgroundColor: bgcColor.color === '#000' ? '#fff' : '#2E2E40',
              borderColor:
                bgcColor.color === '#000'
                  ? 'rgb(245, 245, 245); !important'
                  : '#2E2E40',
              color: bgcColor.color === '#000' ? '#6e6e6e' : '#fff'
            }"
          />
          <div class="tip" :class="tips.tip1 ? 'active' : ''">
            {{ tips.tip1 }}
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :md="12">
        <div class="list">
          <div
            class="tit"
            :style="{
              color: bgcColor.color === '#000' ? '#000' : '#fff'
            }"
          >
            New Password
          </div>
          <input
            type="password"
            v-model.trim="form.pass"
            @input="oldPassChange(2)"
            :style="{
              backgroundColor: bgcColor.color === '#000' ? '#fff' : '#2E2E40',
              borderColor:
                bgcColor.color === '#000' ? 'rgb(245, 245, 245);' : '#2E2E40',
              color: bgcColor.color === '#000' ? '#6e6e6e' : '#fff'
            }"
          />
          <div class="tip" :class="tips.tip2 ? 'active' : ''">
            {{ tips.tip2 }}
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :md="12">
        <div class="list">
          <div
            class="tit"
            :style="{
              color: bgcColor.color === '#000' ? '#000' : '#fff'
            }"
          >
            Confirm Password
          </div>
          <input
            type="password"
            v-model.trim="form.pass2"
            @input="oldPassChange(3)"
            :style="{
              backgroundColor: bgcColor.color === '#000' ? '#fff' : '#2E2E40',
              borderColor:
                bgcColor.color === '#000' ? 'rgb(245, 245, 245);' : '#2E2E40',
              color: bgcColor.color === '#000' ? '#6e6e6e' : '#fff'
            }"
          />
          <div class="tip" :class="tips.tip3 ? 'active' : ''">
            {{ tips.tip3 }}
          </div>
        </div>
      </el-col>
    </el-row>
    <button class="submit" @click="handleClick">提交</button>
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { admintorUpdatePass } from '@/server/serve/api_admintor'
import { ElMessage } from 'element-plus'
import cache, { CacheType } from '@/utils/cache'
import type { UserInfoVuexTypes } from '@/server/serve/api_admintor'

const store = useStore()
const router = useRouter()

// 获取当前背景主题
const bgcColor = computed(() => store.state.Background)

// 密码表单
const form = reactive({
  oldPass: '',
  pass: '',
  pass2: ''
})

// 获取当前用户信息
const userInfo = computed((): UserInfoVuexTypes => store.state.userInfo)

// 提示内容
const tips = reactive({
  tip1: '',
  tip2: '',
  tip3: ''
})

// 监听原密码输入
const oldPassChange = (num: number) => {
  const tip = `tip${num}`
  // @ts-ignore
  tips[tip] = ''
  if (num === 1) {
    if (form.oldPass.length < 6 || form.oldPass.length > 12) {
      tips.tip1 = '请输入6~12位的密码'
    }
  }
  if (num === 2) {
    if (form.pass.length < 6 || form.pass.length > 12) {
      tips.tip2 = '请输入6~12位的密码'
    }
  }
  if (num !== 3) return
  if (form.pass2 !== form.pass) {
    tips.tip3 = '两次输入的密码不一致'
  }
}

// 修改
const handleClick = async () => {
  if (form.oldPass.length < 6 || form.oldPass.length > 12) {
    tips.tip1 = '请输入6~12位的密码'
  } else if (form.pass.length < 6 || form.pass.length > 12) {
    tips.tip2 = '请输入6~12位的密码'
  } else if (form.pass2 !== form.pass) {
    tips.tip3 = '两次输入的密码不一致'
  } else {
    const { data } = await admintorUpdatePass({
      userID: userInfo.value._id,
      ...form
    })
    if (data.code)
      return ElMessage({
        type: 'warning',
        message: data.mes
      })

    // 清除token
    cache.removeItem('token', CacheType.session)
    // 清空vuex
    store.commit('clearUserInfo')
    // 跳回登录
    router.replace('/login')
    ElMessage({
      type: 'success',
      message: data.mes
    })
  }
}
</script>

<style scoped lang="less">
#altpass {
  // 动画名称
  animation: fadeInDown;
  // 动画持续时间
  animation-duration: 1s;
  box-sizing: border-box;
  padding: 10px 15px;
  border-radius: 16px;
  .title {
    color: #f93a08;
    margin: 8px 0;
    font-weight: 600;
    font-size: 17px;
  }
  .list {
    margin-top: 20px;
    position: relative;
    padding-bottom: 0;
    height: 70px;
    .tit {
      color: #393939;
      font-size: 13px;
    }
    input {
      margin-top: 10px;
      border-radius: 16px;
      outline: none;
      height: 42px;
      text-indent: 1em;
      display: block;
      width: 100%;
      color: #6e6e6e;
      font-size: 14px;
      box-sizing: border-box;
      border: 1px solid rgb(245, 245, 245);
      transition: all 0.3s;
      position: absolute;
      z-index: 10;
      &:focus {
        border: 1px solid rgb(245, 108, 108) !important;
      }
      &:hover {
        border: 1px solid rgba(245, 108, 108, 0.5) !important;
      }
    }
    .tip {
      font-size: 12px;
      color: #f93a08;
      transition: all 0.3s;
      height: 14px;
      line-height: 14px;
      position: relative;
      bottom: -35px;
      left: 5px;
      &.active {
        bottom: -55px;
      }
    }
  }
  .submit {
    width: 70px;
    height: 38px;
    background-color: #f93a08;
    border-radius: 16px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    margin-top: 20px;
    padding: 2px 5px;
    outline: none;
    border: none;
    cursor: pointer;
    &:hover {
      background-color: rgb(204, 44, 5);
    }
  }
}
</style>
